.ripple-circle {
  position: absolute;
  border-radius: 50%;

  &.touch-ripple {
    animation: touch-ripple-animation 2s @ease-out-function;
    -webkit-animation: touch-ripple-animation 2s @ease-out-function;
  }

  &.focus-ripple {
    -webkit-transform: scale(0);
    transform: scale(0);
    .ease-out(transform);
    .pulsate(
    @animation-name: focus-ripple-animation;
    @start-size: 0.75;
    @end-size: 0.85;
    );
  }
}

.ripple-circle-mini {
  position: absolute;
  border-radius: 50%;

  &.touch-ripple {
    animation: touch-ripple-mini-animation 2s @ease-out-function;
    -webkit-animation: touch-ripple-mini-animation 2s @ease-out-function;
  }

  &.focus-ripple {
    -webkit-transform: scale(0);
    transform: scale(0);
    .ease-out(transform);
    .pulsate(
    @animation-name: focus-ripple-animation;
    @start-size: 0.75;
    @end-size: 0.85;
    );
  }
}

@keyframes touch-ripple-animation {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(3.5);
    opacity: 0;
  }
}

@-webkit-keyframes touch-ripple-animation {
  from {
    -webkit-transform: scale(0);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(3.5);
    opacity: 0;
  }
}

@keyframes touch-ripple-mini-animation {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

@-webkit-keyframes touch-ripple-mini-animation {
  from {
    -webkit-transform: scale(0);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}